<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML5多文件预览上传 - 站长素材</title>
		<!-- 引用控制层插件样式 -->
		<link rel="stylesheet" href="control/css/zyUpload.css" type="text/css">
		<link rel="stylesheet" href="../../../webjars/layui/2.5.6/css/layui.css"
	media="all">
<script src="../../../webjars/layui/2.5.6/layui.all.js" charset="utf-8"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script type="text/javascript"
	src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
	
		<!-- <script type="text/javascript" src="jquery-1.7.2.js"></script>
		引用核心层插件
		<script type="text/javascript" src="core/zyFile.js"></script>
		引用控制层插件
		<script type="text/javascript" src="control/js/zyUpload.js"></script>
		引用初始化JS
		<script type="text/javascript" src="demo.js"></script>  -->
	</head>
	
	<body>
		
	     <!-- <div id="demo" class="demo"></div>    -->
	 <form id="uploadForm" action="'+para.url+'" enctype="multipart/form-data" method="get"
		enctype="multipart/form-data">
		<div class="upload_box">
			<div class="upload_main">
				<div class="upload_choose">
					<div class="convent_choice">
						<div class="andArea">
						 <div class="filePicker" onclick="centerUploadBox()">点击选择文件</div>
						 <input type="file" id="batchUpload" name="files"
								   accept="image/jpg, image/gif,image/png, image/jpeg"
								   multiple="multiple" style= "position: absolute;visibility:hidden;"
							>
							<!--  -->

							
							
							 
							
						</div>
					</div>
					<span id="fileDragArea" class="upload_drag_area">文件预览</span>
				</div>
				<div class="status_bar">
					<div id="status_info" class="info">选中0张文件，共0B。</div>
					<div class="btns">
						<div class="webuploader_pick">继续选择</div>
						<div class="upload_btn" @click="upload_click()">开始上传</div>
					</div>
				</div>
				<div id="preview" class="upload_preview"></div>
			</div>
			
			<div id="uploadInf" class="upload_inf"></div>
		</div>
	</form>

	
	<button onclick="upload_click()">点击</button>

	<script>
	
	function getPath(obj)  
	{  
	  if(obj)  
	    {  
	 
	    if (window.navigator.userAgent.indexOf("MSIE")>=1)  
	      {  
	        obj.select();  
	 
	      return document.selection.createRange().text;  
	      }  
	 
	    else if(window.navigator.userAgent.indexOf("Firefox")>=1)  
	      {  
	      if(obj.files)  
	        {  
	 
	        return obj.files.item(0).getAsDataURL();  
	        }  
	      return obj.value;  
	      }  
	    return obj.value;  
	    }  
	}
		function centerUploadBox() {

			
			var me = this;
			var batchUpload = document.querySelector('#batchUpload');
			batchUpload.click();
			var temp =getPath(batchUpload);
			var filesList = document.querySelector('#batchUpload').files;
			var files = $("#batchUpload").val();
			console.log(files);
			
			
		
			
			batchUpload.addEventListener('change', function() {
				var filesList = document.querySelector('#batchUpload').files;
				if (filesList.length == 0) {
					return;
				} else {

				}
			})
		}

		//文件上传
		var v1 = new Vue({
			el:".btns",
			data:{
				array : "hello",
			},
			methods:{
				upload_click(){
					
					// 点击按钮上传文件
	                // 检查文件是否合法
	                var fileFullName = $('#batchUpload').val();
	                console.log(fileFullName);
	                // 构建form数据
	                var formData = new FormData();
	                formData.append('file', $('#batchUpload')[0].files[0]); 
	                // 上传文件
	                console.log(formData);
	                
					console.info("确认上传");
					var temp = $("#batchUpload").val();
					console.log(temp);
					var files = $("#batchUpload").val();
					console.info(files);
					axios.get('../../../upload/uploadPortrait.s', {params: {path:files}}).then(function(res){
						if(res.data.code  == 1){
							alert("头像上传成功");
						}else{
							alert(res.code.img);
						}
					})
				}
			}
		
		}) 
		

		layui.use('upload', function() {
			var upload = layui.upload;

			//执行实例
			var uploadInst = upload.render({
				elem : '#test1' //绑定元素
				,
				url : '/upload/' //上传接口
				,
				done : function(res) {
					//上传完毕回调
				},
				error : function() {
					//请求异常回调
				}
			});
		});
	</script>

</body>
</html>







